<template>
  <div>
    <!-- 潜在客户 -->

    <!-- 搜索 -->
    <el-card class="card">
      <el-form ref="ruleFormRef" :inline="true" class="demo-form-inline" :model="params">
        <el-form-item label="老人姓名：" prop="name">
          <el-input v-model="params.name" clearable placeholder="请输入老人姓名" />
        </el-form-item>
        <el-form-item label="身份证号：" prop="idCard">
          <el-input v-model="params.idCard" clearable placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="创建日期：" prop="dateTime">
          <el-date-picker
            v-model="dateTime"
            type="daterange"
            unlink-panels
            range-separator="-"
            start-placeholder="开始时间"
            value-format="YYYY-MM-DD"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            @change="(e: any) => dateChange(e, params)"
          />
        </el-form-item>
        <el-form-item label="状态：" prop="state">
          <el-select v-model="params.state!" clearable style="width: 200px">
            <el-option v-for="item in stateList" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search">查询</el-button>
          <el-button :icon="Refresh" @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 列表 -->
    <el-card class="card">
      <ELTable v-bind="tableConfig" ref="customerTable">
        <!-- 性别 -->
        <template #gender="{ scope }">
          {{ scope.row.gender == 1 ? "男" : "女" }}
        </template>
        <!-- 状态 -->
        <template #state="{ scope }">
          {{ scope.row.state == 0 ? "未签约" : "已签约" }}
        </template>
        <template #addTime="{ scope }">
          {{ dayJs(scope.row.addTime).format("YYYY-MM-DD HH:mm") }}
        </template>
        <template #btns="{ deleteAll }">
          <el-button type="primary" @click="add">新增潜在客户</el-button>
          <el-button :icon="Delete" type="danger" @click="deleteAll">批量删除</el-button>
          <el-button>EXCEL导入</el-button>
        </template>
        <template #operate="{ scope, deleteHandle }">
          <el-button type="primary" :icon="Edit" text @click="update(scope.row.id)">编辑</el-button>
          <el-button type="primary" :icon="Document" text @click="toDetail(scope.row.id)">
            详情
          </el-button>
          <el-button type="primary" :icon="Message" text @click="toQuestion">咨询登记</el-button>
          <el-button type="danger" :icon="Delete" text @click="deleteHandle(scope.row.id)">
            删除
          </el-button>
        </template>
      </ELTable>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import ELTable, { TableData } from "../../components/ELTable.vue";
import { delCustomer, getCustomerList, delMany } from "../../api/market/customer/customer";
import { AddParams, ListParams } from "@/api/market/customer/type";
import dayJs from "dayjs";
import { Delete, Edit, Message, Document, Search, Refresh } from "@element-plus/icons-vue";
import type { FormInstance } from "element-plus";

const ruleFormRef = ref<FormInstance>();

const router = useRouter();
const route = useRoute();
const customerTable = ref();

//创建日期
const dateTime = ref("");
const shortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "最近3个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

//状态
const stateList = ref([
  { id: 0, name: "未签约" },
  { id: 1, name: "已签约" },
]);

//搜索参数
const params = reactive<ListParams>({
  page: "1",
  pageSize: "10",
  name: "",
  idCard: "",
  beginDate: "",
  state: null,
  endDate: "",
});

//选择时间
const dateChange = (e: any, params: any) => {
  if (e) {
    params.beginDate = e[0];
    params.endDate = e[1];
  } else {
    params.beginDate = "";
    params.endDate = "";
  }
  // console.log(e);
};

//重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

//查询
const search = () => {
  customerTable.value.getData(params);
  // console.log("params", params);
};

//新增潜在客户
const add = () => {
  router.push("/market/customer-add");
};

const tableConfig = reactive<TableData>({
  loadData: getCustomerList,
  delete: delCustomer,
  deleteAll: delMany,
  columns: [
    {
      prop: "id",
      label: "序号",
      attrs: {
        width: 50,
      },
    },
    {
      prop: "name",
      label: "老人姓名",
    },
    {
      prop: "gender",
      label: "性别",
      slot: true,
      attrs: {
        width: 50,
      },
    },
    {
      prop: "idCard",
      label: "身份证",
    },
    {
      prop: "source",
      label: "在线咨询",
    },
    {
      prop: "addTime",
      label: "创建时间",
      slot: true,
      attrs: {
        width: 160,
      },
    },
    {
      prop: "state",
      label: "状态",
      slot: true,
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
      attrs: {
        width: 400,
      },
    },
  ],
});

//修改用户信息
const update = (id: number) => {
  router.push({
    path: `/market/customer-edit/${id}`,
  });
};

//跳转详情
const toDetail = (id: number) => {
  router.push({
    path: `customer-details/${id}`,
  });
};

//跳转咨询登记
const toQuestion = () => {
  console.log("111111");

  router.push("/market/question");
};
</script>

<style scoped>
.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>
